<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <!--这里的css文件需要加载自己的本地资源-->
    <link rel="stylesheet" type="text/css" href="http://121.40.188.62/kuibuversion1/css/imgsize.css">
    <link rel="stylesheet" type="text/css" href="http://121.40.188.62/kuibuversion1/css/jquery.fs.boxer.css">
    <!--<script src="js/iosPageScript.js"></script>-->
    <!-- <script src="http://121.40.188.62/kuibuversion1/js/jquery-1.7.1.js"></script> -->
    <script src="http://121.40.188.62/kuibuversion1/js/jquery-1.8.3.min.js"></script>
    <script src="http://121.40.188.62/kuibuversion1/js/matchDevice.js"></script>
    <script src="http://121.40.188.62/kuibuversion1/js/jquery.lazyload.js"></script>
    <script src="http://121.40.188.62/kuibuversion1/js/changeSrc.js"></script>
    <script src="http://121.40.188.62/kuibuversion1/js/jquery.fs.boxer.js"></script>
    <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

    <link rel="stylesheet" type="text/css" href="http://www.kuibutech.com/kuibuversion1/css/sweetalert.css">
    <script src="http://www.kuibutech.com/kuibuversion1/js/sweetalert.min.js"></script>

    <script>

        $(document).ready(function(){
            var width=document.getElementById("download").style.width;
//            alert(width);
            document.getElementById("download").style.height= width * 0.167;

            $("#close").click(function(){
                $("#download").hide();
            });

            $("img").lazyload({
                effect : "fadeIn",
                threshold : 5000
            });

            $.post("http://www.kuibutech.com/kuibuversion1/thirdPart/weixinShare/getSignature",{url:encodeURIComponent(location.href.split('#')[0])},function(data,status){

                var url = location.href.split('?')[0];
                var strings = url.split('/');
                var pageId = strings[strings.length - 1];
                var transUrl = "http://www.kuibutech.com/kuibuversion1/version1_3/page/transmit/" + pageId;
                wx.config({
                    debug: false,
                    appId: 'wx24d314f71306b4b3',
                    timestamp: data.timeStamp,
                    nonceStr: 'haoransun',
                    signature: data.signature,
                    jsApiList: [
                        'checkJsApi',
                        'onMenuShareTimeline',
                        'onMenuShareAppMessage',
                        'onMenuShareQQ',
                        'onMenuShareWeibo',
                        'onMenuShareQZone'
                    ]
                });
                wx.ready(function(){

                    wx.onMenuShareTimeline({
                        title: "跬步 | "+$("#title").text(), // 分享标题
                        link: location.href.split('?')[0], // 分享链接
                        imgUrl: $("#imgUrl").attr("src"), // 分享图标
                        success: function (res) {
                            console.log(res);
                            $.post(transUrl,{},function(transData){

                            })
                        },
                        cancel: function () {
                            // 用户取消分享后执行的回调函数
                        }
                    });

                    wx.onMenuShareAppMessage({
                        title: "跬步|"+$("#title").text(), // 分享标题
                        desc: "来自跬步APP", // 分享描述
                        link: location.href.split('?')[0], // 分享链接
                        imgUrl: $("#imgUrl").attr("src"), // 分享图标
                        type: '', // 分享类型,music、video或link，不填默认为link
                        dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
                        success: function () {
                            // 用户确认分享后执行的回调函数
                            $.post(transUrl,{},function(transData){

                            })
                        },
                        cancel: function () {
                            // 用户取消分享后执行的回调函数
                        }
                    });

                    wx.onMenuShareQQ({
                        title: "跬步|"+$("#title").text(), // 分享标题
                        desc: "来自跬步APP", // 分享描述
                        link: location.href.split('?')[0], // 分享链接
                        imgUrl: $("#imgUrl").attr("src"), // 分享图标
                        success: function () {
                            // 用户确认分享后执行的回调函数
                            $.post(transUrl,{},function(transData){

                            })
                        },
                        cancel: function () {
                            // 用户取消分享后执行的回调函数
                        }
                    });

                    wx.onMenuShareWeibo({
                        title: "跬步|"+$("#title").text(), // 分享标题
                        desc: "来自跬步APP", // 分享描述
                        link: location.href.split('?')[0], // 分享链接
                        imgUrl: $("#imgUrl").attr("src"), // 分享图标
                        success: function () {
                            // 用户确认分享后执行的回调函数
                            $.post(transUrl,{},function(transData){

                            })
                        },
                        cancel: function () {
                            // 用户取消分享后执行的回调函数
                        }
                    });

                    wx.onMenuShareQZone({
                        title: "跬步|"+$("#title").text(), // 分享标题
                        desc: "来自跬步APP", // 分享描述
                        link: location.href.split('?')[0], // 分享链接
                        imgUrl: $("#imgUrl").attr("src"), // 分享图标
                        success: function () {
                            // 用户确认分享后执行的回调函数
                            $.post(transUrl,{},function(transData){

                            })
                        },
                        cancel: function () {
                            // 用户取消分享后执行的回调函数
                        }
                    });

                });
            });

            $(".boxer").boxer({
                requestKey: 'abc123',
                duration:200,
//                mobile:true,
            });
        });
        window.onload= function () {
            if(browserRedirect()==0){
                $("#download").show();
            }else if(browserRedirect()==1){
                $("#downloadImg").attr("action","https://itunes.apple.com/us/app/id1019254614");
                $("#download").show();
            }
            if(window.wdx.isShow()==false){
                $("#download").hide();
            }
            if(is_weixn()){
                var app = document.getElementById("downloadapp");
                app.onclick = alertHit;
            }

        }

        function is_weixn() {
            var ua = navigator.userAgent.toLowerCase();
            if (ua.match(/MicroMessenger/i) == "micromessenger") {
                return true;
            } else {
                return false;
            }
        }

        function alertHit(){
            swal({
                title: "",
                text: "链接打不开? 点击右上角选择<br/><img width='30px' height='15px' src='http://img.kuibutech.com/kbApp_fixedImage/wxopensafari.png'><span style=\"color:red\">\"在浏览器中打开\"<span>",
                html: true,
                allowOutsideClick:true,
                showConfirmButton:false
            });
        }

    </script>
</head>
<body>
<div class="fontImg">
    <div class="left"><img src="http://121.40.188.62/kuibuversion1/img/halfLimpidness.png" width=100%></div>
    <div style="position:absolute;z-index: 2;left: 0.5em;bottom: 5px; width: 95%;">
        <div id="title" font-family="Arial" style="color:#FFFFFF;" font-size="5.5">{kuibu_pageTitle}</div>

        <div style="float:left;">
            <div style="float: left;margin-top: 11px;">
                <img src="http://www.kuibutech.com/kuibuversion1/img/readNum.png" style="width:16px;height:9px;"></div>
            <div style="float: left;margin-left:5px;">
                <font face="Arial" color="#E7E7F3" size="2">{kuibu_pageReadNumber}</font></div>

            <div style="float: left">
                <font face="Ariemal" color="#E7E7F3" size="2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{kuibu_pageDate}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;From: {kuibu_pageFrom}</font></div>
        </div>
    </div>
    <img id="imgUrl" src="{kuibu_pageTitleImage}" width=100%><!--这里是标题大图的URL--></div>

<div class="content">
    {kuibu_pageContent}
</div>
<div style="margin-top:0px;margin-left: 6%;height: 25px">
    <div style="float: left;margin-top:0em;"><a href="{kuibu_sourceAddress}" target="_blank">
        <font size="2em" style="color:#ABABAB;letter-spacing:0.05em">查看原文</font></a>
    </div>
</div>

<div id="download"  hidden style="position:fixed;bottom:0px;width:100%;">
    <div id="close" style="position:absolute; border: 0px solid red;height: 30px;width: 30px;margin-left: 1%;margin-top: 15px"></div>
    <div id="downloadapp" style="position:absolute; border: 0px solid red;height: 30px;width: 50px;margin-left: 80%;margin-top: 15px" onclick="redirect()"></div>
    <img style="width:100%; height:100%;" src="http://www.kuibutech.com/kuibuversion1/img/app/appdownload.jpg"/>
</div>

</body>

<!--设置下载框链接为打开或者下载，ios和安卓不同地址-->
<script>
    var loadIframe = null;
    function createIframe(){
        var iframe = document.createElement("iframe");
        iframe.style.cssText = "display:none;width:0px;height:0px;";
        document.body.appendChild(iframe);
        loadIframe = iframe;
    }
    function redirect(){
        loadIframe.src="kuibu://";
        var t = Date.now();
        setTimeout(function(){
            if(Date.now()-t < 1600){
                if(browserRedirect()==0){
                    location.href="http://139.129.18.232/kuibuversion1/version1_3/download/0";
                }else if(browserRedirect()==1){
                    location.href="http://139.129.18.232/kuibuversion1/version1_3/download/1";
                }else {
                    location.href="http://www.kuibutech.com";
                }
            }
        },1500)
    }
    createIframe();
</script>

</html>
